import React, { Component } from 'react';
import {
  TweenLite,
  Back,
  TimelineMax,
  Power1,
  Linear
  } from 'gsap/TweenMax';
import ReactSVG from 'react-svg'

// import productList from '../imgs/product';
import shoppScvg from '../imgs/shopp-btn.svg';


class Shopping extends Component {
  constructor(props) {
    super(props)

    this.state = {
      close: true
    }

    this.btn = null
  }

  componentDidMount() {
    // this.init()
    // window.addEventListener('resize', this.aaa);
  }
  componentWillUnmount() {
    console.log('componentWillUnmount')
    // window.removeEventListener('resize', this.aaa);
  }

  aaa() {
    console.log('aaaa')
  }
  init() {
    // 获取元素
    const list = document.querySelector('[data-anim=list]')
    // const  items = document.querySelectorAll('[data-anim=list-item]')
    const  items = document.querySelectorAll('[data-anim=list-items]')
    const  ripple = document.querySelector('[data-anim=ripple]')
    const  btnBg = document.querySelector('[data-anim=btn-bg]')
    const  btnLabel = document.querySelector('[data-anim=btn-label]')
    const  btnShadow = document.querySelector('[data-anim=btn-shadow]')
    const  frontGroup = document.querySelector('[data-anim=front-group]')
    const  frontWheels = document.querySelectorAll('[data-anim=front-wheel]')
    const  frontWheelBack = document.querySelector('[data-anim=front-wheel-back]')
    const  backWheels = document.querySelectorAll('[data-anim=back-wheel]')
    const  backWheelsBack = document.querySelectorAll('[data-anim=back-wheel-back]')
    const  containerParts = document.querySelectorAll('[data-anim=container-part]')
    const  containerLip = document.querySelector('[data-anim=container-lip]')
    const  container = document.querySelector('[data-anim=container]')
    const  truckBtn = document.querySelector('[data-anim=truck-btn]')
    const  shippedBtn = document.querySelector('[data-anim=btn-shipped]')

    this.btn = document.querySelector('[data-click=btn]');

    // 事件监听
    this.btn.addEventListener('click', btnHandler);

    // Handlers
    function btnHandler(e) {
      getBtnTl( getClickCoords(e) ).play();
      shipItTl.restart();
    }

    // Animations
    TweenLite.defaultEase = Back.easeOut.config(1);
    /*
    TweenLite.to(mc, 1.5, {x:100, y:200, alpha:50});
    第一个参数是需要缓动的对象，
    第二个参数是持续时间，
    第三个是需要改变的对象属性。
    任何DisplayObject的属性都可以改变。还有很多可选的参数，比如缓动函数，最后结束时候的回调函数。
    */

    function getBtnTl(coords) {
      const btnTl = new TimelineMax({ paused:true });

      btnTl
        .fromTo(btnShadow, 0, { autoAlpha:1 }, { autoAlpha:0 }, 0)
        .to(ripple, 0, { x: coords.x, y:coords.y }, 0)
        .fromTo(ripple, 0.5, { autoAlpha:0.5, scale: 0,}, { autoAlpha:0, scale: 20, transformOrigin: 'center', ease: Power1.easeOut }, 0);

      return btnTl;
    }


    const shipItTl = new TimelineMax({ paused:true, onComplete:reset })
    const listTl = new TimelineMax({ paused:true })
    const truckTl = new TimelineMax({ paused:true })

    // paused:true 动画将在创作时立即停止

    shipItTl
      .add( listTl.play(), 0 )
      .add( truckTl.play(), 0.2 );

    listTl
      .to(list, 0.3, { y:-10, ease: Power1.easeInOut}, 0)
      .to(list, 0.05, { y:0, ease: Power1.easeIn}, 0.3)
      // .fromTo(items[0], 0.15, { y:0 }, { y:85, ease: Linear.easeNone }, 0.35)
      // .fromTo(items[1], 0.15, { y:0 }, { y:138, ease: Linear.easeNone }, 0.35)
      // .fromTo(items[2], 0.15, { y:0 }, { y:178, ease: Linear.easeNone }, 0.35)
      .fromTo(items, 0.15, { y:0 }, { y:178, ease: Linear.easeNone }, 0.35)
      .fromTo(items, 0, { autoAlpha:1 }, { autoAlpha:0 }, 0.5)
      .to([btnBg, btnLabel], 0.15, { scaleX: 1.05, transformOrigin: 'center', ease:Power1.easeInOut, repeat:1, yoyo:true }, 0.5)
      .to([btnBg, btnLabel], 0.15, { scaleY: 0.95, ease:Power1.easeInOut, repeat:1, yoyo:true }, 0.5);


    truckTl
      .set(frontGroup, { x:-50, scale:0.84, transformOrigin: 'left top', autoAlpha:1 })
      .set([frontWheels, frontWheelBack], { y:-25, autoAlpha:1 })
      .set(frontWheels[1], { autoAlpha:0 })
      .set(container, { scale:0.98, transformOrigin: 'right top', autoAlpha:1 })
      .set([containerParts,containerLip], { y:-15, autoAlpha:1 })
      .set(containerParts[2], { autoAlpha:0.5 })
      .set([backWheels, backWheelsBack], { y:-30, autoAlpha:1 })
      .to(container, 0.5, { scale:1 }, 0)
      .staggerTo(containerParts, 0.5, { y:0 }, -0.1, 0.2)
      .to(containerLip, 0.5, { y:0 }, 0.6)
      .staggerTo(backWheelsBack, 0.5, { y:0 }, -0.1, 0.55)
      .staggerTo(backWheels, 0.5, { y:0 }, 0.1, 0.6)
      .to(frontGroup, 0.6, { scale:1, x:0, ease: Back.easeOut.config(1.4) }, 0.7)
      .to(frontWheelBack, 0.5, { y:0 }, 0.8)
      .to(frontWheels, 0.5, { y:0, ease:Back.easeOut.config(5.4) }, 0.9)
      .to(frontWheels[1], 0, { autoAlpha:1 }, 1.05)
      .to(shippedBtn, 0, { autoAlpha:1 }, 1.05)
      .fromTo(truckBtn, 1.2, { x:0 }, { x:'+=1000', ease: Back.easeIn.config(0.5) }, 1.4)
      .fromTo(truckBtn, 0.5, { autoAlpha:1 }, { autoAlpha:0, ease: Power1.easeIn }, 2);

    function reset() {

      const	resetTl = new TimelineMax({ paused:true });

      resetTl
        .set(items, { y:0 })
        .set(truckBtn, { x:0 })
        .set(frontGroup, { x:-50, scale:0.84, transformOrigin: 'left top', autoAlpha:1 })
        .set([frontWheels, frontWheelBack], { y:-25, autoAlpha:1 })
        .set(frontWheels[1], { autoAlpha:0 })
        .set(container, { scale:0.98, transformOrigin: 'right top', autoAlpha:1 })
        .set([containerParts,containerLip], { y:-15, autoAlpha:1 })
        .set(containerParts[2], { autoAlpha:0.5 })
        .set([backWheels, backWheelsBack], { y:-30, autoAlpha:1 })
        .to(items, 0.5, { autoAlpha:1, y:0, ease: Power1.easeInOut }, 0.01)
        .to(truckBtn, 0.5, { autoAlpha:1, ease: Power1.easeInOut }, 0.01);

      resetTl.restart();
    };

    // Functions
    function getClickCoords(e) {

      const svgRect = document.querySelector('#ship-it').getBoundingClientRect()
      const btnRect = document.querySelector('[data-anim=btn-bg]').getBoundingClientRect()
      const pixelCoordSample = btnRect.left-svgRect.left
      const svgCoordSample = 88
      const normFactor = pixelCoordSample/svgCoordSample
      const src = {
          x: e.clientX,
          y: e.clientY,
          xMin: btnRect.left,
          xMax: btnRect.left + btnRect.width,
          yMin: btnRect.top,
          yMax: btnRect.top + btnRect.height
        }
      const rpl = {
          xMin: -(btnRect.width)/2/normFactor,
          xMax: (btnRect.width)/2/normFactor,
          yMin: -(btnRect.height)/2/normFactor,
          yMax: (btnRect.height)/2/normFactor,
          offset: parseInt(ripple.getAttribute('r')),
        }

      const coords = {
        x: map(src.x, src.xMin, src.xMax, rpl.xMin, rpl.xMax) + rpl.offset,
        y: map(src.y, src.yMin, src.yMax, rpl.yMin, rpl.yMax) + rpl.offset
      };

      return coords;
    }

// Returns a value on destination range based on the input value on source range
    function map(value, sourceMin, sourceMax, destinationMin, destinationMax) {
      return destinationMin + (destinationMax - destinationMin) * ((value - sourceMin) / (sourceMax - sourceMin)) || 0;
    }
  }


  render() {
    return (
      <div className="product-box">
        <div className="product-list">
          <div className="list-bg" data-anim="list">
            <span className="title">SHOPPING LIST</span>
            <div data-anim="list-items">
              <div className="list-item" data-anim="list-item"></div>
              <div className="list-item" data-anim="list-item"></div>
              <div className="list-item" data-anim="list-item"></div>
            </div>
          </div>
          <ReactSVG src={shoppScvg}  onInjected={ svg => this.init()}/>

        </div>
      </div>
    );
  }
}

export default Shopping;
